<template>
	<view class="list_wrapper">
		<view class="list_wrap" v-if="list && list.length">
			<view class="item" v-for="item in list" :key="item.id" @click="handleToDetail(item)">
				<view class="item_top">
					<image :lazy-load="true" :src="img_baseUrl +item.imgPath" mode="aspectFill"></image>
					<view class="item_title"><text>{{item.title}}</text> </view>
				</view>
			</view>
		</view>
		<view class="noData" v-else>
			<image :src="`${img_baseUrl}/statics/std/static/noData.png`"></image>
			<text>暂无数据</text>
		</view>
	</view>
</template>

<script>
	import {
		requestGet
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				list: [],
				current: 1,
				total: 0,
				loadAll: false, // 已加载全部
				img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
			}
		},
		components: {},
		mounted() {
			this.getLists(1);
		},
		methods: {
			// 点击 跳转至详情
			handleToDetail(item) {
				if (item.linkUrl) {
					uni.navigateTo({
					  url: item.linkUrl,
					});
					return
				} 
				uni.navigateTo({
					url: `/page_index/scenery/detail?id=${item.id}`
				})
			},
			//获取列表数据
			getLists(pageNum) {
				requestGet("/home/content/list", {
						channelId: 6,
						pageNum,
						pageSize: 10,
					},"/baseplatform")
					.then((res) => {
						if (res.code === 200) {
							this.total = res.total;
							if (res.total < 11) {
								this.list = res.rows || [];
							} else {
								this.list = this.list.concat(res.rows)
							}
						}
						console.log('传递过来得', res.rows)
					})
					.catch((err) => console.log("错误了", err));
			},
			/**
			 * 页面上拉触底事件的处理函数
			 */
			onReachBottom: function() {
				if (this.current < parseInt(this.total / 10) + 1) {
					this._getList(this.current + 1);
				} else {
					this.loadAll = true
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list_wrapper {
		width: 100%;
		height: 100vh;
		background: #f5f5f5;

		.list_wrap {
			box-sizing: border-box;
			padding: 32rpx;
			background-color: #fff;
			height: 100%;
			display: flex;
			justify-content: space-between;
			overflow: auto;
			flex-wrap: wrap;
			align-content: flex-start;
		}

		.item {
			width: 48%;
			margin-bottom: 24rpx;

			.item_top {
				width: 100%;
				height: 420rpx;
				margin-bottom: 24rpx;
				// flex: 1;
				margin-right: 20upx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					display: block;
					border-radius: 24rpx;
				}

				.item_title {
					// padding: 0 18rpx 16rpx 18rpx;
					position: absolute;
					left: 0rpx;
					bottom: 0rpx;
					height: 168rpx;
					width: 100%;
					background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
					display: flex;
					align-items: flex-end;
					border-radius: 0 0 24rpx 24rpx;
					text{
						padding: 0 24rpx 16rpx 24rpx;
						word-break: break-all;
						font-size: 28rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 32rpx;
					}
				}
			}

			.item_top:nth-child(2n) {
				margin-right: 0upx;
			}
		}
	}
</style>